<!--
 * @Author: 17607638761 2856491026@qq.com
 * @Date: 2023-05-17 13:36:37
 * @LastEditors: 17607638761 zoujiaying@yuandian.com
 * @LastEditTime: 2023-07-13 14:47:22
 * @FilePath: \bpm-ui\src\views\middle-platform\overview\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="overview-container">
		<div class="query-form">
			<yd-form v-if="isForm" ref="myForm" :options="formOptions" :model="params.queryData" @change="handlerSelectChange" @formInit="handlerFormInit">
				<template #form-btn>
					<div>
						<el-button class="yd-form-btn" type="primary" @click="initRequest()">查询</el-button>
					</div>
				</template>
			</yd-form>
		</div>
		<div :key="Math.random() * 100" class="hander-proportion el-card-body-top-zero">
			<YdCard :title="'告警数占比'">
				<template #extra-title>
					<el-tooltip effect="light" placement="top-start" style="margin-left: 5px; z-index: 999">
						<template #content>
							单位属性或单位产生的告警数/总告警数。 <br />例： <br />1.单位属性维度：直属单位产生告警数50条，总告警数100条，占比：50/100。<br />
							2.单位维度：信息技术中心产生告警数10条，总告警数100条，占比：10/100。
						</template>
						<svg-icon icon-class="question" class="yd-card-title-icon"></svg-icon>
					</el-tooltip>
				</template>
				<div class="pie-group">
					<!-- <div v-for="(item, index) in echartsData.pieData" :key="item.name">
						<h1>{{ item.name }}</h1>
						<YdEcharts :ref-val="'provincial-company'" :options="state.groupHeadOptions" />
					</div> -->
					<div v-if="echartsData.groupHeadPieData[0].value !== 0">
						<YdEcharts :ref-val="'provincial-company'" :options="state.groupHeadOptions" @echartsClick="echartsClick" />
						<h1>{{ echartsData.groupHeadPieData[0].title }}</h1>
					</div>
					<div v-if="echartsData.provincialCompanyPieData[0].value !== 0">
						<YdEcharts :ref-val="'major-company'" :options="state.provincialCompanyOptions" @echartsClick="echartsClick" />
						<h1>{{ echartsData.provincialCompanyPieData[0].title }}</h1>
					</div>
					<div v-if="echartsData.directlyCompanyPieData[0].value !== 0">
						<YdEcharts :ref-val="'group-headquarters'" :options="state.directlyCompanyOptions" @echartsClick="echartsClick" />
						<h1>{{ echartsData.directlyCompanyPieData[0].title }}</h1>
					</div>
					<div v-if="echartsData.majorCompanyPieData[0].value !== 0">
						<YdEcharts :ref-val="'direct-company'" :options="state.majorCompanyOptions" @echartsClick="echartsClick" />
						<h1>{{ echartsData.majorCompanyPieData[0].title }}</h1>
					</div>
					<div v-if="echartsData.otherPieData[0].value !== 0">
						<YdEcharts :ref-val="'other'" :options="state.otherOptions" @echartsClick="echartsClick" />
						<h1>{{ echartsData.otherPieData[0].title }}</h1>
					</div>
				</div>
			</YdCard>
		</div>
		<div :key="Math.random() * 100" class="el-card-body-top-zero error-ability-statistics">
			<YdCard :title="'异常能力统计'">
				<template #extra-title>
					<el-tooltip effect="light" placement="top-start" style="margin-left: 5px; z-index: 999">
						<template #content>
							单位属性或单位产生了告警数的能力数。 <br />例：
							<br />1.单位属性维度：直属单位由10项能力，其中有1项能力产生了告警，则异常能力数为1项。<br />
							2.单位维度：信息技术中心有5项能力，其中有1项能力产生了告警，则异常能力数为1项。
						</template>
						<svg-icon icon-class="question" class="yd-card-title-icon"></svg-icon>
					</el-tooltip>
				</template>
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'error-ability-statistics-bar'" :options="state.errorAbilitystatisticsOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
		<div :key="Math.random() * 100" class="el-card-body-top-zero alarm-quantity-statistcs">
			<YdCard :title="'告警数量统计'">
				<template #extra-title>
					<el-tooltip effect="light" placement="top-start" style="margin-left: 5px; z-index: 999">
						<template #content>
							单位属性或单位产生的告警数。 <br />例： <br />1.单位属性维度：直属单位产生告警数5条。<br />
							2.单位维度：信息技术中心产生告警数10条。
						</template>
						<svg-icon icon-class="question" class="yd-card-title-icon"></svg-icon>
					</el-tooltip>
				</template>
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'alarm-quantity-statistcs-pie'" :options="state.alarmQuantityStatistcsOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
		<div :key="Math.random() * 100" class="el-card-body-top-zero error-ability-specific">
			<YdCard :title="'异常能力比重'">
				<template #extra-title>
					<el-tooltip effect="light" placement="top-start" style="margin-left: 5px; z-index: 999">
						<template #content>
							单位属性或单位的异常能力数/所有能力数。 <br />例：
							<br />1.单位属性维度：直属单位由10项能力，其中有1项异常能力，则异常能力比重1/10。<br />
							2.单位维度：信息技术中心有5项能力，其中有1项能力产生了告警，则异常能力比重1/5。
						</template>
						<svg-icon icon-class="question" class="yd-card-title-icon"></svg-icon>
					</el-tooltip>
				</template>
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'error-ability-specific-line'" :options="state.errorAbilitySpecificOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
		<div :key="Math.random() * 100" class="el-card-body-top-zero average-alarm-number">
			<YdCard :title="'平均告警数'">
				<template #extra-title>
					<el-tooltip effect="light" placement="top-start" style="margin-left: 5px; z-index: 999">
						<template #content>
							单位属性或单位产生的告警数/异常能力数。 <br />例：<br />
							1.单位属性维度：直属单位有10项能力，其中有1项异常能力，产生告警数3条，则平均告警数3（3/1）条。<br />
							2.单位维度：信息技术中心有5项能力，其中有1项异常能力，产生告警数2条，则平均告警数2（2/1）条。
						</template>
						<svg-icon icon-class="question" class="yd-card-title-icon"></svg-icon>
					</el-tooltip>
				</template>
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'average-alarm-number-pie'" :options="state.averageAlarmOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ECOption } from '../../../../echarts';
import { onActivated, onBeforeMount, reactive, ref, nextTick } from 'vue';
import 'echarts/lib/component/legend';
import YdEcharts from '@/components/YdEcharts/index.vue';
import { SERIESLABEL, formatterToolTipFn } from '../echartsConfig';
import { orgTypeAlarmStatisticss, orgTypeAbnormalAbility } from '@/api/middle-monitor/overview';
import { TITLE, GRID, SYMBOLSIZE } from '../echartsConfig';
import { useRouter } from 'vue-router';
import { calculateTimeBefore, commonFormatter } from '@/utils/common';
import { page, publicValue } from '@/api/search/searchOptions';
import { colorSortGroup, xAxisOrYaxis } from '@/utils/echartsConfig';

interface QueryData {
	startTime: string;
	endTime: string;
	orgType: string;
	value: string[];
}
interface Params {
	queryData: QueryData;
}
const router = useRouter();
const pieColorGroup = ['#697CF6', '#4DBC84', '#FE5578', '#FE9A0C', '#06F4F4', '#1FE2FF'];
const echartsData = reactive<any>({
	title: [11],
	provincialCompanyData: {
		title: {
			text: '省公司',
			left: 'center',
			textStyle: {
				//文字颜色
				color: '#FFFFFF',
				//字体风格,'normal','italic','oblique'
				fontStyle: 'normal',
				//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
				fontWeight: 500,
				//字体系列
				fontFamily: 'sans-serif',
				//字体大小
				fontSize: 17,
			},
		},
		// 取消鼠标移入
		silent: true,
		tooltip: {
			trigger: 'item',
		},
		legend: {
			orient: 'horizontal',
			top: 'bottom',
			icon: 'circle',
			align: 'left',
			bottom: '0',
			itemWidth: 12,
			itemHeight: 12,
			textStyle: {
				color: 'red',
				fontSize: 30,
				align: 'left',
				// 文字块背景色，一定要加上，否则对齐不会生效
				backgroundColor: 'transparent',
			},
		},
	},
	pieConfig: {
		// 取消鼠标移入
		silent: true,
		tooltip: {
			trigger: 'item',
		},
	},
	pieSeriesConfig: {
		name: '',
		type: 'pie',
		radius: ['50%', '70%'],
		avoidLabelOverlap: false,
		top: -20,
		color: pieColorGroup[5],
		label: {
			normal: {
				show: true,
				position: 'center',
				color: '#FFFFFF',
				// formatter: '{title|{b}}\n{total|{c}%}',
				formatter: '{total|{c}%}',
				// 单独设置样式，类似class
				rich: {
					title: {
						fontSize: 14,
						fontFamily: '微软雅黑',
						color: '#FFFFFF',
						lineHeight: 30,
					},
					total: {
						fontFamily: '微软雅黑',
						fontSize: 24,
						color: pieColorGroup[4],
					},
				},
			},
			emphasis: {
				//中间文字显示
				show: true,
			},
		},
		emphasis: {
			label: {
				show: true,
			},
		},
		labelLine: {
			show: false,
		},
	},
	pieData: [
		{
			value: 0,
			name: '集团总部',
		},
		{
			value: 0,
			name: '省公司',
		},
		{
			value: 0,
			name: '直属公司',
		},
		{
			value: 0,
			name: '专业公司',
		},
		{
			value: 0,
			name: '其他',
		},
	],
	// 异常能力数统计x轴label
	errorAbilityStatisticsScale: [],
	//异常能力数统计数据
	errorAbilityStatisticsData: [],
	// 异常能力比重
	errorAbilitySpecificData: [],
	//平均告警数
	averageAlarmData: [],
	groupHeadPieData: [
		{
			value: 0,
			name: '集团总部',
			title: '',
		},
	],
	provincialCompanyPieData: [
		{
			value: 0,
			name: '省公司',
			title: '',
		},
	],
	directlyCompanyPieData: [
		{
			value: 0,
			name: '直属公司',
			title: '',
		},
	],
	majorCompanyPieData: [
		{
			value: 0,
			name: '专业公司',
			title: '',
		},
	],
	otherPieData: [
		{
			value: 0,
			name: '其他',
			title: '',
		},
	],
});
const state = reactive<any>({
	pieTotal: 0,
	// 集团总部
	groupHeadOptions: {
		// title: { ...TITLE, text: '' },
		...echartsData.pieData,
		series: [
			{
				...echartsData.pieSeriesConfig,
				data: echartsData.groupHeadPieData,
			},
		],
	} as ECOption,
	// 省公司
	provincialCompanyOptions: {
		...echartsData.pieData,
		series: [
			{
				...echartsData.pieSeriesConfig,
				data: echartsData.provincialCompanyPieData,
			},
		],
	} as ECOption,
	// 直属公司
	directlyCompanyOptions: {
		...echartsData.pieData,
		series: [
			{
				...echartsData.pieSeriesConfig,
				data: echartsData.directlyCompanyPieData,
			},
		],
	} as ECOption,
	// 专业公司
	majorCompanyOptions: {
		...echartsData.pieData,
		series: [
			{
				...echartsData.pieSeriesConfig,
				data: echartsData.majorCompanyPieData,
			},
		],
	} as ECOption,
	// 其他
	otherOptions: {
		...echartsData.pieData,
		series: [
			{
				...echartsData.pieSeriesConfig,
				data: echartsData.otherPieData,
			},
		],
	} as ECOption,
	// 异常能力统计柱状图
	errorAbilitystatisticsOptions: {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '项', false, true);
			},
		},
		grid: { ...GRID },
		xAxis: [{ ...xAxisOrYaxis.xAxis, data: echartsData.errorAbilityStatisticsScale }],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			minInterval: 1,
			max: function (val: any) {
				return val.max;
			},
			axisLabel: {
				...xAxisOrYaxis.yAxis.axisLabel,
				formatter: '{value} 项',
			},
		},
		series: [
			{
				name: '异常能力数统计',
				type: 'bar',
				barWidth: '10%',
				data: echartsData.errorAbilityStatisticsData,
				color: ['#1FE2FF'],
			},
		],
	} as ECOption,
	// 告警数量统计
	alarmQuantityStatistcsOptions: {
		legend: {
			// vertical 上下布局
			orient: 'vertical',
			top: 'center',
			// left: 'right',
			x: '70%',
			textStyle: {
				color: '#fff',
				fontSize: 14,
			},
			// itemWidth: 24, // 设置图例图形的宽
			// itemHeight: 18, // 设置图例图形的高
			// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
			itemGap: 30,
			// 文字靠右
			align: 'left',
		},
		color: pieColorGroup,
		series: [
			{
				name: '告警数量统计',
				type: 'pie',
				radius: ['40%', '80%'],
				center: ['30%', '50%'],
				roseType: 'area',
				// 设置饼状图位置
				lineStyle: {
					type: 'dashed',
				},
				data: echartsData.pieData,
				// data: echartsData.pieData.map((item, index) => {
				// 	return {
				// 		label: {
				// 			color: pieColorGroup[index],
				// 		},
				// 		...item,
				// 	};
				// }),
				labelLine: {
					normal: {
						length: 15, // 指示线长度
					},
				},
				label: {
					normal: {
						textStyle: {
							fontSize: 18, // 提示文字大小
						},
						formatter: '{c} 条',
						color: '#fff',
					},
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 30,
						fontWeight: 'bold',
						color: '#fff',
					},
				},
			},
		],
	} as ECOption,
	// 异常能力比重
	errorAbilitySpecificOptions: {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'line',
			},
			// formatter: function (params) {
			// 	return params[0].name + ': ' + params[0].value + '项'; // 拼接成需要的字符串，并添加单位
			// },
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '%');
			},
		},
		grid: GRID,
		xAxis: {
			...xAxisOrYaxis.xAxis,
			boundaryGap: true,
			data: echartsData.errorAbilityStatisticsScale,
		},
		yAxis: {
			...xAxisOrYaxis.yAxis,
			axisLabel: {
				...xAxisOrYaxis.yAxis.axisLabel,
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '%');
				},
			},
			type: 'value',
			max: 100,
		},
		series: [
			{
				// 不显示折线节点
				name: '异常能力比重',
				symbolSize: SYMBOLSIZE,
				color: [pieColorGroup[4]],
				data: echartsData.errorAbilitySpecificData,
				type: 'line',
				areaStyle: {},
			},
		],
		areaStyle: {
			color: {
				type: 'liner',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: 'rgba(9, 246, 255, .3)',
					},
					{
						offset: 1,
						color: 'rgba(58,77,233,0)',
					},
				],
				global: false, // 缺省为 false
			},
		},
	} as ECOption,
	// 平均告警数
	averageAlarmOptions: {
		legend: {
			// vertical 上下布局
			orient: 'vertical',
			top: 'center',
			// left: 'right',
			x: '70%',
			textStyle: {
				color: '#fff',
				fontSize: 14,
			},
			// itemWidth: 24, // 设置图例图形的宽
			// itemHeight: 18, // 设置图例图形的高
			// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
			itemGap: 30,
			// 文字靠右
			align: 'left',
		},
		color: pieColorGroup,
		series: [
			{
				name: '平均告警数（告警数/异常能力数）',
				type: 'pie',
				radius: ['40%', '80%'],
				center: ['30%', '50%'],
				roseType: 'area',
				// 设置饼状图位置
				lineStyle: {
					type: 'dashed',
				},
				data: echartsData.averageAlarmData,
				labelLine: {
					normal: {
						length: 10, // 指示线长度
					},
				},
				label: {
					normal: {
						textStyle: {
							fontSize: 18, // 提示文字大小
						},
						formatter: '{c} 条',
						color: '#fff',
					},
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 30,
						fontWeight: 'bold',
						color: '#fff',
					},
				},
			},
		],
	} as ECOption,
});
const params = reactive<Params>({
	queryData: {
		startTime: '',
		endTime: '',
		orgType: '',
		value: [],
	},
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '单位属性',
		prop: 'value',
		selectKey: 'value',
		selectLabel: 'label',
		attrs: {
			multiple: true, // 全选
			indeterminate: false, // 全选
		},
		span: 7,
		selectAll: true, // 是否默认全选
		isAllOrSingle: true, // 是否只支持全选且只可单选不可多选
		api: { name: 'page', params: { isRecords: true } },
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		dateType: 'datetimerange',
		enableCrossDay: true,
		span: 10,
		// shortcutsKeys: ['last1h', 'today', 'lastDay'],
		// defaulShortcutsKey: 'lastlh',
		defaulShortcutsKey: 'today',
	},
]);

//event
/**
 * 部门类型告警数查询
 */
interface Items {
	alarmCount: number;
	orgTypeIdOrOrgId: string;
	orgTypeNameOrOrgName: string;
}
interface Item extends Items {
	totalAlarmCount: number;
	abnormalAbilityCount: number;
	totalAbilityCount: number;
}
function orgTypeAlarmStatisticssFn(): void {
	echartsData.groupHeadPieData[0].value = 0;
	echartsData.provincialCompanyPieData[0].value = 0;
	echartsData.directlyCompanyPieData[0].value = 0;
	echartsData.majorCompanyPieData[0].value = 0;
	echartsData.otherPieData[0].value = 0;
	echartsData.averageAlarmData.length = 0;
	orgTypeAlarmStatisticss(params.queryData).then((res: ApiResponse) => {
		echartsData.pieData.length = 0;
		state.pieTotal = res.data.length;
		if (params.queryData.orgType) {
			let arr = res.data?.slice(0, 4); // 选择单个单位下前四个单位
			arr &&
				arr?.forEach((item: Item) => {
					echartsData.pieData.push({
						name: item.orgTypeNameOrOrgName,
						value: item.alarmCount,
						total: item.totalAlarmCount,
						code: item.orgTypeIdOrOrgId,
					});
				});
			if (res.data.length >= 5) {
				let otherArr = res.data?.slice(4, res.data.length); // 全部数据合成一个其他单位
				let i = 0;
				otherArr && otherArr?.forEach((item: Item) => (i += item.alarmCount));
				echartsData.pieData.push({ name: '其他', value: i });
			}

			echartsData.pieData?.forEach((item: { name: string; value: number; total: number; code?: string }, index: number) => {
				let t = (item.value / item.total) * 100;
				let val = t % 1 !== 0 ? ((item.value / item.total) * 100).toFixed(2) : parseInt((item.value / item.total) * 100);
				if (index === 0) {
					echartsData.groupHeadPieData[0].value = val;
					echartsData.groupHeadPieData[0].title = item.name;
					// echartsData.averageAlarmData.push({ name: item.name, value: item.value });
				}
				if (index === 1) {
					echartsData.provincialCompanyPieData[0].value = val;
					echartsData.provincialCompanyPieData[0].title = item.name;
					// echartsData.averageAlarmData.push({ name: item.name, value: item.value });
				}
				if (index === 2) {
					echartsData.directlyCompanyPieData[0].value = val;
					echartsData.directlyCompanyPieData[0].title = item.name;
					// echartsData.averageAlarmData.push({ name: item.name, value: item.value });
				}
				if (index === 3) {
					echartsData.majorCompanyPieData[0].value = val;
					echartsData.majorCompanyPieData[0].title = item.name;
					// echartsData.averageAlarmData.push({ name: item.name, value: item.value });
				}
				if (index === 4) {
					echartsData.otherPieData[0].value = val;
					echartsData.otherPieData[0].title = item.name;
				}
				echartsData.averageAlarmData.push({ name: item.name, value: item.value });
			});
		} else {
			res.data?.forEach((item: Item, index: number) => {
				let t = (item.alarmCount / item.totalAlarmCount) * 100;
				let val =
					t % 1 !== 0 ? ((item.alarmCount / item.totalAlarmCount) * 100).toFixed(2) : parseInt((item.alarmCount / item.totalAlarmCount) * 100);
				if (item.orgTypeNameOrOrgName === '集团总部') {
					echartsData.groupHeadPieData[0].value = val;
					echartsData.groupHeadPieData[0].title = item.orgTypeNameOrOrgName;
					echartsData.groupHeadPieData[0].code = item.orgTypeIdOrOrgId;
				}
				if (item.orgTypeNameOrOrgName === '省公司') {
					echartsData.provincialCompanyPieData[0].value = val;
					echartsData.provincialCompanyPieData[0].title = item.orgTypeNameOrOrgName;
					echartsData.provincialCompanyPieData[0].code = item.orgTypeIdOrOrgId;
				}
				if (item.orgTypeNameOrOrgName === '直属公司' || item.orgTypeNameOrOrgName === '直属单位') {
					echartsData.directlyCompanyPieData[0].value = val;
					echartsData.directlyCompanyPieData[0].title = item.orgTypeNameOrOrgName;
					echartsData.directlyCompanyPieData[0].code = item.orgTypeIdOrOrgId;
				}
				if (item.orgTypeNameOrOrgName === '专业公司') {
					echartsData.majorCompanyPieData[0].value = val;
					echartsData.majorCompanyPieData[0].title = item.orgTypeNameOrOrgName;
					echartsData.majorCompanyPieData[0].code = item.orgTypeIdOrOrgId;
				}
				if (item.orgTypeNameOrOrgName === '其他') {
					echartsData.otherPieData[0].value = val;
					echartsData.otherPieData[0].title = item.orgTypeNameOrOrgName;
					echartsData.otherPieData[0].code = item.orgTypeIdOrOrgId;
				}
				echartsData.pieData.push({ name: item.orgTypeNameOrOrgName, value: item.alarmCount });
				echartsData.averageAlarmData.push({ name: item.orgTypeNameOrOrgName, value: item.alarmCount });
			});
		}
	});
}
/**
 * 全部单位异常能力数查询
 */
function orgTypeAbnormalAbilityFn(): void {
	orgTypeAbnormalAbility(params.queryData).then((res: ApiResponse) => {
		echartsData.errorAbilityStatisticsScale.length = 0;
		echartsData.errorAbilityStatisticsData.length = 0;
		echartsData.errorAbilitySpecificData.length = 0;

		res.data?.forEach((item: Item, index: number) => {
			echartsData.errorAbilityStatisticsScale.push(item.orgTypeNameOrOrgName);
			echartsData.errorAbilityStatisticsData.push(item.abnormalAbilityCount);
			echartsData.errorAbilitySpecificData.push(((item.abnormalAbilityCount / item.totalAbilityCount) * 100).toFixed(2));
			echartsData.averageAlarmData?.forEach((items: { name: string; value: number }) => {
				if (item.orgTypeNameOrOrgName === items.name) {
					items.value = +(items.value / item.abnormalAbilityCount).toFixed(2);
				}
			});
			// echartsData.averageAlarmData.push({ name: item.orgTypeNameOrOrgName, value: (item.alarmCount / item.abnormalAbilityCount).toFixed(2) });
		});
	});
}

async function initRequest(): Promise<void> {
	Object.keys(params.queryData).forEach((key: string) => {
		if (key === 'label') {
			delete params.queryData[key];
		}
	});
	await orgTypeAlarmStatisticssFn();
	await orgTypeAbnormalAbilityFn();
}

let isForm = ref(false);
async function publicValueFn() {
	let res = await publicValue();
	let minutes = res.data || 5;
	isForm.value = true;
	params.queryData.endTime = calculateTimeBefore(minutes, params.queryData.endTime);
	params.queryData.startTime = calculateTimeBefore(minutes, params.queryData.startTime, 'day');
}
onBeforeMount(() => {
	publicValueFn();
});
// emit
/**
 * 下拉框change
 */
function handlerSelectChange(options: BaseOptionType, value: string[], statusValue: string[]): void {
	if (options.type === 'select') {
		if (!value) {
			params.queryData.orgType = '';
			initRequest();
			return;
		}
		if (value && value.length === options.children?.length) {
			params.queryData.orgType = '';
			initRequest();
			return;
		}
		params.queryData.orgType = statusValue && statusValue[0];
	}
	initRequest();
}
let selectOptions = [] as any;
/**
 * 表单初始化数据
 */
async function handlerFormInit(options: BaseOptionType, formData: any) {
	initRequest();
}
function echartsClick(e: any) {
	console.log(e, params.queryData.orgType, flagTrue(), selectOptions, 'eeee');
	router.push({
		path: '/middle-monitor/overview/overview-details',
		query: {
			orgName: !flagTrue() ? e.data?.title || e.name : '',
			orgTypeArr: flagTrue() ? filterTypeFn(e.name) : params.queryData.orgType,
			startTime: params.queryData.startTime,
			endTime: params.queryData.endTime,
		},
	});
}
function flagTrue(): boolean {
	return params.queryData.orgType === '';
}
function filterTypeFn(name: string) {
	let res = selectOptions.filter((item: any) => item.label === name || name === item.description);
	if (res.length > 0) {
		return res[0].value;
	}
	return '';
}
function pageFn() {
	page({}).then((res: any) => {
		selectOptions = res.data.records;
	});
}
pageFn();
</script>

<style scoped lang="scss">
@import '../index.scss';
@import '@/styles/variables.module.scss';
.overview-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 200px repeat(2, 340px);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	gap: 20px;
	.query-form {
		grid-area: 1 / 1 / 2 / 3;
	}
	.hander-proportion {
		grid-area: 2 / 1 / 3 / 3;
		.pie-group {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: 1fr;
			grid-column-gap: 0px;
			grid-row-gap: 0px;
			height: 100%;
			h1 {
				text-align: center;
				margin-top: -25px;
			}
			div {
				width: 100%;
				height: 100%;
			}
		}
	}

	:deep(.alarm-quantity-statistcs) {
		.el-card__body {
			padding-bottom: 0 !important;
		}
	}
	:deep(.el-row) {
		height: 30px;
		.el-col-6 {
			height: 100%;
		}
	}
}
</style>
